/* WCAG 可访问性色彩对比度优化系统 */

:root {
  /* WCAG AA 标准：文本对比度至少 4.5:1，大文本 3:1 */
  /* WCAG AAA 标准：文本对比度至少 7:1，大文本 4.5:1 */
  
  /* 优化后的主文本颜色 - 确保足够的对比度 */
  --text-primary-accessible: #1e293b; /* 深灰色，对比度 > 7:1 */
  --text-secondary-accessible: #475569; /* 中灰色，对比度 > 4.5:1 */
  --text-tertiary-accessible: #64748b; /* 浅灰色，对比度 > 4.5:1 */
  
  /* 强调色优化 - 确保在白色背景上有足够对比度 */
  --color-accent-accessible: #2563eb; /* 更深的蓝色，对比度 > 4.5:1 */
  --color-accent-light: #3b82f6; /* 标准蓝色 */
  --color-accent-dark: #1d4ed8; /* 深蓝色 */
  
  /* 背景色优化 */
  --color-bg-accessible: #f8fafc; /* 浅灰背景，对比度优化 */
  --color-main-accessible: #ffffff; /* 纯白背景 */
  --color-card-accessible: #ffffff; /* 卡片背景 */
  
  /* 边框色优化 */
  --color-border-accessible: #cbd5e1; /* 中等对比度边框 */
  
  /* 状态色优化 */
  --color-success-accessible: #059669; /* 深绿色 */
  --color-warning-accessible: #d97706; /* 深橙色 */
  --color-error-accessible: #dc2626; /* 深红色 */
  --color-info-accessible: #2563eb; /* 深蓝色 */
}

/* 暗色主题对比度优化 */
.dark {
  --text-primary-accessible: #f1f5f9; /* 浅灰色 */
  --text-secondary-accessible: #cbd5e1; /* 中浅灰 */
  --text-tertiary-accessible: #94a3b8; /* 浅灰 */
  
  --color-bg-accessible: #0f172a; /* 深蓝灰 */
  --color-main-accessible: #1e293b; /* 深灰 */
  --color-card-accessible: #1e293b; /* 卡片深灰 */
  
  --color-border-accessible: #334155; /* 深灰边框 */
  
  --color-accent-accessible: #60a5fa; /* 亮蓝色 */
  --color-success-accessible: #10b981; /* 亮绿色 */
  --color-warning-accessible: #f59e0b; /* 亮橙色 */
  --color-error-accessible: #ef4444; /* 亮红色 */
}

/* 对比度检测和修复类 */
.contrast-check {
  /* 用于调试对比度的辅助类 */
  outline: 2px solid red;
}

/* 强制对比度修复 */
.text-contrast-fix {
  color: var(--text-primary-accessible) !important;
}

.bg-contrast-fix {
  background-color: var(--color-bg-accessible) !important;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  :root {
    --text-primary-accessible: #000000;
    --text-secondary-accessible: #333333;
    --color-bg-accessible: #ffffff;
    --color-main-accessible: #ffffff;
  }
  
  .dark {
    --text-primary-accessible: #ffffff;
    --text-secondary-accessible: #cccccc;
    --color-bg-accessible: #000000;
    --color-main-accessible: #111111;
  }
}

/* 可访问性焦点指示器 */
.focus-visible {
  outline: 2px solid var(--color-accent-accessible);
  outline-offset: 2px;
}

/* 链接可访问性优化 */
a {
  color: var(--color-accent-accessible);
  text-decoration: none; /* 默认不显示下划线 */
}

a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline; /* 悬停时显示下划线 */
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* 菜单栏链接特殊处理 - 完全不显示下划线和边框 */
.menu-link,
.sidebar-link,
.nav-link,
#sidebar a,
#tab-bar a,
.tab a {
  text-decoration: none !important;
  outline: none !important;
}

.menu-link:hover,
.sidebar-link:hover,
.nav-link:hover,
#sidebar a:hover,
#tab-bar a:hover,
.tab a:hover {
  text-decoration: none !important;
  outline: none !important;
}

.menu-link:focus,
.sidebar-link:focus,
.nav-link:focus,
#sidebar a:focus,
#tab-bar a:focus,
.tab a:focus {
  text-decoration: none !important;
  outline: none !important;
}

/* 强制移除所有菜单栏相关元素的下划线和边框 */
#sidebar *,
#tab-bar *,
.tab * {
  text-decoration: none !important;
  outline: none !important;
}

/* 按钮可访问性优化 */
.btn-accessible {
  background-color: var(--color-accent-accessible);
  color: white;
  border: 2px solid transparent;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-accessible:hover {
  background-color: var(--color-accent-dark);
  transform: translateY(-1px);
}

.btn-accessible:focus {
  outline: 2px solid var(--color-accent-accessible);
  outline-offset: 2px;
}

/* 表单元素可访问性 */
input, textarea, select {
  border: 2px solid var(--color-border-accessible);
  background-color: var(--color-main-accessible);
  color: var(--text-primary-accessible);
  padding: 0.5rem;
  border-radius: 4px;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--color-accent-accessible);
  outline: none;
}

/* 错误状态可访问性 */
.error-text {
  color: var(--color-error-accessible);
  font-weight: 600;
}

.success-text {
  color: var(--color-success-accessible);
  font-weight: 600;
}

.warning-text {
  color: var(--color-warning-accessible);
  font-weight: 600;
}

/* 对比度测试工具类（开发用） */
.contrast-test {
  position: relative;
}

.contrast-test::after {
  content: attr(data-contrast-ratio);
  position: absolute;
  top: -20px;
  right: 0;
  background: black;
  color: white;
  padding: 2px 4px;
  font-size: 10px;
  border-radius: 2px;
  opacity: 0.8;
}